import React, { FC, useState } from "react"
import { NavLink as RouterLink, matchPath, useLocation, NavLinkProps } from "react-router-dom"
import { alpha, useTheme, styled } from "@mui/material/styles"
import { Box, ListItemText, ListItemButton, Grid, MenuItem, Menu } from "@mui/material"
import { useTranslation } from "react-i18next"
import { INavItemProps, INavSectionProps } from "@/components/NavSection"
import { ListItemButtonProps } from "@mui/material/ListItemButton/ListItemButton"

const ListItemStyle = styled((props) => <ListItemButton disableGutters {...props} />)<
  ListItemButtonProps & { component?: React.ElementType } & Partial<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>
>(({ theme }) => ({
  ...theme.typography.body2,
  height: 40,
  lineHeight: 1,
  position: "relative",
  textTransform: "capitalize",
  color: theme.palette.text.secondary,
  borderRadius: theme.shape.borderRadius,
}))

const NavItem: FC<INavItemProps> = ({ item, active }) => {
  const { t } = useTranslation()
  const theme = useTheme()
  const isActiveRoot = active(item.path)
  const { title, path, icon, info, children } = item

  const [open, setOpen] = useState(null)
  const handleOpen = (event) => {
    setOpen(event.currentTarget)
  }
  const handleClose = () => {
    setOpen(null)
  }

  const activeRootStyle = {
    color: "primary.main",
    fontWeight: "fontWeightMedium",
    bgcolor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
  }

  if (children)
    return (
      <>
        <ListItemStyle
          sx={{
            ...(isActiveRoot && activeRootStyle),
            display: { xs: "none", lg: "block" },
            px: 2,
          }}
          id="basic-button"
          aria-controls={open ? "basic-menu" : undefined}
          aria-haspopup="true"
          aria-expanded={open ? "true" : undefined}
          onClick={handleOpen}
        >
          <ListItemText disableTypography primary={t(title)} />
        </ListItemStyle>
        <Menu
          keepMounted
          anchorEl={open}
          open={Boolean(open)}
          onClose={handleClose}
          anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
          transformOrigin={{ vertical: "top", horizontal: "center" }}
        >
          {children.map((option, index) => {
            return (
              <MenuItem to={path + "/" + option.path} component={RouterLink} key={index} selected={option.path === "newest"} onClick={handleClose} sx={{ typography: "body2" }}>
                {t(option.title)}
              </MenuItem>
            )
          })}
        </Menu>
      </>
    )

  return (
    <ListItemStyle
      component={RouterLink}
      to={path}
      sx={{
        ...(isActiveRoot && activeRootStyle),
        display: { xs: "none", lg: "block" },
        px: 2,
      }}
    >
      <ListItemText disableTypography primary={t(title)} />
    </ListItemStyle>
  )
}

const NavSectionHorizontal: FC<INavSectionProps> = ({ navConfig, ...other }) => {
  const { pathname } = useLocation()
  const match = (path) => (path ? !!matchPath({ path, end: false }, pathname) : false)

  return (
    <Box {...other}>
      <Grid container direction="row" sx={{ px: { xs: 0, md: 1 } }}>
        {navConfig.map((item) => (
          <NavItem key={item.title} item={item} active={match} />
        ))}
      </Grid>
    </Box>
  )
}

export default NavSectionHorizontal
